<template>
  <div class="parent d-flex jc-center ai-center pb-150">
    <div class="d-flex flex-column jc-center ai-center mr-90">
      <UploadImg @updateFile="handleUpload1" />
      <div class="mt-20">{{ $t('renlianbidui.uploadFaceToCompare') }}</div>
    </div>
    <el-tooltip placement="top" popper-class="tooltip" effect="light">
      <div slot="content">
        <div class="title" style="font-weight:bold;">{{$t('renlianbidui.rateReference')}}</div>
        <br /><br />{{ $t('renlianbidui.tip1') }}
        <br /><br />{{ $t('renlianbidui.tip2') }}
        <br /><br />{{ $t('renlianbidui.tip3') }}
      </div>
      <div
        :class="canClick ? 'compare-box' : 'compare-box compare-box-disabled'"
        @click="handleCompare"
      >
        <span class="number">{{FaceImg1to1Rsp_Score ? FaceImg1to1Rsp_Score+'%' : ''}}</span>
        <span class="text">{{ $t('renlianbidui.pipeidu') }}</span>
      </div>
    </el-tooltip>
    <div class="d-flex flex-column jc-center ai-center mr-90">
      <UploadImg @updateFile="handleUpload2" />
      <div class="mt-20">{{ $t('renlianbidui.uploadFaceToCompare') }}</div>
    </div>
  </div>
</template>

<script>
import UploadImg from "@/components/UploadImg";
import { compare } from "./service";
export default {
  components: { UploadImg },
  data() {
    // const formData = new FormData();
    // formData.append("msg_id", "771");
    return {
      formData:{},
      FaceImg1to1Rsp_Score: void 0,
      isUpload1: false,
      isUpload2: false
    };
  },
  computed: {
    canClick() {
      return this.formData.img_1 && this.formData.img_2;
    }
  },
  methods: {
    handleUpload1(file) {
      // this.isUpload1 = true;
      // this.formData.img_1 = file;
      this.$set(this.formData, "img_1", file)
      // this.formData.delete("img_1");
      // this.formData.append("img_1", file);
    },
    handleUpload2(file) {
      // this.isUpload2 = true;
      // this.formData.img_2 = file;
      this.$set(this.formData, "img_2", file)
      // this.formData.delete("img_2");
      // this.formData.append("img_2", file);
    },
    async handleCompare() {
      if (!this.canClick) return;
      let res = await compare(this.formData);
      if (res.code == 0) {
        this.FaceImg1to1Rsp_Score = res.data.FaceImg1to1Rsp_Score;
      }
    }
  }
};
</script>

<style scoped lang="less">
.parent {
  height: 100%;
}
.compare-box {
  width: 235px;
  height: 234px;
  background: url("../assets/renlianbidui.png") center no-repeat;
  background-size: 100%;
  cursor: pointer;
  color: rgba(26, 188, 156, 1);
  margin-right: 90px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  .number {
    font-size: 58px;
    line-height: 58px;
  }
  .text {
    font-size: 24px;
    color: #fff;
  }
  &-disabled {
    cursor: not-allowed;
  }
}
</style>